<template>
<view>
<view class="address--add">
  <view class="address--add__item border-bottom">
    <text class="address--cells__title">收货人</text>
    <view class="address--cell">
      <input class="address-input" maxlength="10" :value="addressForm.userName" @blur="fieldInput" data-input="addressForm.userName" placeholder="请输入收货人姓名" placeholder-class="placeholder">
    </view>
  </view>
  <view class="address--add__item border-bottom">
    <text class="address--cells__title">手机号</text>
    <view class="address--cell">
      <input class="address-input" :value="addressForm.phone" maxlength="11" @input="fieldInput" data-input="addressForm.phone" placeholder="请输入收货人手机号" placeholder-class="placeholder">
    </view>
  </view>
  <view class="address--add__item" @click="selectLocation">
    <text class="address--cells__title">所在地区</text>
    <view class="address--cell">
      <text class="location__province location__item">{{addressForm.province}}</text>
      <text class="location__city location__item">{{addressForm.city}}</text>
      <text class="location__county location__item">{{addressForm.county}}</text>
    </view>
    <u-icon class="address--cells__icon" name="map"></u-icon>
  </view>
  <view class="address--add__item" style="margin-top: 30rpx;">
    <text class="address--cells__title">详细地址</text>
    <view class="address--cell">
      <textarea class="address-textarea" maxlength="48" :value="addressForm.detailInfo" @input="fieldInput" data-input="addressForm.detailInfo" placeholder="街道、楼牌号等" placeholder-class="placeholder"></textarea>
    </view>
  </view>
  <button type="warn" @click="addOrUpdateAddress">保存</button>
</view>
<!-- <u-popup :show="showSelectLocation" mode="bottom" @close="onSelectClose">
  <u-picker :columns="areaList" @change="areaChange" @cancel="onSelectClose" @confirm="onSelectConfirm"></u-picker>
</u-popup> -->
<w-picker
  :visible.sync="showSelectLocation"
  mode="region"
  default-type="value"
  :hide-area="false"
  @confirm="onSelectConfirm($event, 'region')"
  @cancel="onSelectClose=false"
  ref="region"
></w-picker>
</view>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import wPicker from "@/components/w-picker/w-picker.vue"
import {
  addAddress,
  updateAddress,
  getLatAndLon,
} from "@/api/modules/address";
export interface AddressForm{
    id:number
    city:string
    county:string
    detailInfo:string
    location:string
    phone:string
    province:string
    userName:string
    defaultStatus:string | number
    postCode:string
}
@Component({
  components:{
    wPicker
  }
})
export default class AddAddress extends Vue {
    addressList:Array<any>=[]
    addressForm:AddressForm={
      id: 0,
      city: '',
      county: '',
      detailInfo: '',
      location: '',
      phone: '',
      province: '',
      userName: '',
      defaultStatus: '',
      postCode: '',
    }
    areaList= {
      province_list: {},
      city_list: {},
      county_list: {},
    }
    defaultArea:string=""
    showSelectLocation:boolean=false
  async onLoad(options) {
    if(options.addressForm){
      this.addressForm=JSON.parse(options.addressForm)
    }
    // this.getDataList();
    /** 初始化地址选择器数据（初始化省） */
    // const area = await getArea({ id: "", type: 1 });
    // const province_list = {};
    // area.forEach(element => {
    //   province_list[element.value] = element.label;
    // });
    // this.areaList.province_list=province_list
    // const provinceStrList = ["北京市", "重庆市", "上海市", "天津市"];
    // if (provinceStrList.find(p => this.addressForm.province === p)) {
    //     this.addressForm.city='市辖区'
    // }
  }
    /** 获取地址列表 */
  // async getDataList() {
  //   const addressList = await getAddressList({ type: 1 });
  //   this.addressList=addressList
  // }
  async selectLocation() {
    this.showSelectLocation=true
    // for (const provinceCode in this.areaList.province_list) {
    //   if (
    //     this.areaList.province_list[provinceCode] ===
    //     this.addressForm.province
    //   ) {
    //     const city_list = {};
    //     const county_list = {};
    //     let cityCode = "";
    //     /* 获取城市数据 */
    //     const resCity = await getArea({
    //       id: provinceCode,
    //       type: 2,
    //     });
    //     /* 转换城市数据格式 */
    //     resCity.forEach(element => {
    //       city_list[element.value] = element.label;
    //     });
    //     /* 获取城市代码 */
    //     resCity.forEach(element => {
    //       if (element.label === this.addressForm.city) {
    //         cityCode = element.value;
    //       }
    //     });
    //     /* 获取区数据 */
    //     const resCounty = await getArea({
    //       id: cityCode,
    //       type: 3,
    //     });
    //     /* 转换区数据格式 */
    //     let defaultArea = "";
    //     resCounty.forEach(element => {
    //       county_list[element.value] = element.label;
    //       if (element.label === this.addressForm.county) {
    //         defaultArea = element.value;
    //       }
    //     });
    //     const areaList = {
    //       province_list: this.areaList.province_list,
    //       city_list,
    //       county_list,
    //     };
    //     this.areaList=areaList
    //     this.defaultArea=defaultArea
    //   }
    // }
  }
  fieldInput(e) {
    this.setData({
      [`${e.currentTarget.dataset.input}`]:e.detail.value
    })
  }

  onSelectClose() {
    this.showSelectLocation=false;
  }
  onSelectConfirm(picker) {
    const { area,city,province } = picker.obj;
      this.addressForm.province=province.label
      this.addressForm.city= city.label
      this.addressForm.county= area.label
      this.showSelectLocation=false
  }
    // 省级联动
  // async provinceChange(code) {
  //   const cityData = await getArea({
  //     id: code,
  //     type: 2,
  //   });
  //   const city_list = {};
  //   cityData.forEach(element => {
  //     city_list[element.value] = element.label;
  //   });
  //   await this.cityChange(cityData[0].value, city_list);
  // }
    // 市级联动
  // async cityChange(code, city_list) {
  //   /* 设置地址选择器区域数据 */
  //   const countryData = await getArea({
  //     id: code,
  //     type: 3,
  //   });
  //   const county_list = {};
  //   countryData.forEach(element => {
  //     county_list[element.value] = element.label;
  //   });
  //   const areaList = {
  //     province_list: this.areaList.province_list,
  //     city_list,
  //     county_list,
  //   };
  //   this.areaList=areaList
  // }
  // async areaChange(picker) {
  //   const { values, index } = picker.detail;
  //   /* 设置地址选择器城市数据 */
  //   if (index === 0) {
  //     this.provinceChange(values[index].code);
  //   }
  //   /* 设置地址选择器区域数据 */
  //   if (index === 1) {
  //     this.cityChange(values[index].code, this.areaList.city_list);
  //   }
  // }
    beforeValuate() {
    if (!this.addressForm.userName) {
           uni.showToast({
          title: "请输入收货人姓名",
          icon: "none"
      })
      return false;
    }
    if (
      !(
        this.addressForm.phone && this.$global.isPhone(this.addressForm.phone)
      )
    ) {
      uni.showToast({
          title: "手机号不正确",
          icon: "none"
      })
      return false;
    }
    return true;
  }
    async addOrUpdateAddress() {
    if (!this.beforeValuate()) {
      return;
    }
    const province = this.addressForm.province;
    const city = this.addressForm.city;
    const county = this.addressForm.county;
    const provinceStrList = ["北京市", "重庆市", "上海市", "天津市"];
    if (provinceStrList.find(p => this.addressForm.province === p)) {
        this.addressForm.city="市辖区"
    }
    if (!(province && city && county)) {
      uni.showToast({
          title:"存在地址信息为空",
          icon:"none"
      })
      return;
    }
    if (this.addressForm.id !== 0) {
      /* 更新地址 */
      await this.getLatAndLonByAddress();
      // 如果不修改直接保存，后端会报重复错误，不进行处理，认为修改成功
      try {
        await updateAddress(JSON.stringify(this.addressForm));
        uni.showToast({ title:"修改地址成功",icon:"none" });
        uni.navigateBack({
          delta: 1,
        });
      } catch (err) {
        // 后端会做重复判断
        if (err === "请勿添加相同地址") {
          uni.showToast({ title:"修改地址成功",icon:"none" });
          uni.navigateBack({
            delta: 1,
          });
        } else {
          uni.showToast({ title:err,icon:"none" });
        }
      }
    } else {
      try {
        await this.getLatAndLonByAddress();
        await addAddress(JSON.stringify(this.addressForm));
        uni.showToast({ title:"添加地址成功",icon:"none" });
        uni.navigateBack({
          delta: 1,
        });
      } catch (err) {
        uni.showToast({ title:err,icon:"none" });
      }
    }
  }

  /* 根据地址信息获取经纬度 */
  async getLatAndLonByAddress() {
    const { province, city, county, detailInfo } = this.addressForm;
    const site = province + city + county + detailInfo;
    const latAndLon = await getLatAndLon({ site });
    this.addressForm.location=latAndLon.location
    this.addressForm.postCode=latAndLon.andlongitudeVo.adcode 
    // this.setData({ [""]: latAndLon.location });
    // this.setData({ [""]: latAndLon.andlongitudeVo.adcode });
  }
  isPhone(value) {
    return !!(/^1(3|4|5|7|8)\d{9}$/.test(value) && value.match(/^\d{11}$/));
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/_var.scss";

page {
  height: 100%;
}

.address--add {
  background-color: #f5f5f5;
  height: 100%;
  .address--add__item {
    position: relative;
    display: flex;
    width: 100%;
    font-size: 28rpx;
    line-height: 48rpx;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20rpx 32rpx;

    .address--cells__title {
      max-width: 90px;
      min-width: 90px;
    }

    .address--cells__icon {
      position: absolute;
      right: 50rpx;
      top: 25rpx;
    }
  }

  .icon {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
  }
  button {
    padding: 30rpx;
    height: 102rpx;
    border-radius: 45rpx;
    margin: 350rpx 50rpx 0 50rpx;
    background-color: #fc425a;
  }
  .border-bottom {
    border-bottom: 1rpx solid #f8f5f9;
  }
  .placeholder {
    color: #cacaca;
  }
}

.address-textarea {
  height: 150rpx;
  width: 500rpx;
}

.van-picker-column__item {
  color: #888888;
}
</style>